<template>
	<view>
		<!-- <uni-nav-		box-sizing: border-box;bar left-icon="back" left-text="" right-text="" title='订单支付'></uni-nav-bar> -->

		<view class="order-info">
			<view class="text">
				订单编号: {{id}}
			</view>
			<view class="text">
				订单金额: <text style="color: red;font-size: 40rpx;font-weight: 800;">￥:{{price}}</text>
			</view>
		</view>
		<view class="pay">
			<view class="left">
				<view class="top">
					<image src="../../../static/images/icons/wxpay.png" mode=""></image>
					<text class='name'>微信支付</text>
				</view>
				<view class="top">
					<image src="../../../static/images/icons/alipay.png" mode=""></image>
					<text class='name'>支付宝支付</text>
				</view>
			</view>
			<view>
				<radio-group class="right" @change="radioChange">
					<label class="radio">
						<radio value=1 checked /></label>
					<label class="radio">
						<radio value=2 /></label>
				</radio-group>
			</view>
		</view>
		<button @click="payfor" type="default">立即支付</button>
	</view>

</template>

<script>
	import {
		addPreOrder,
		getPreOrderById,
		addConfirmOrder,
		payConfirm,
		receiveDone,
		deleteOrder
	} from "../../../api/my/order/order.js"
	export default {
		data() {
			return {
				type: 1,
				id: "",
				price: ''
			};
		},
		methods: {
			// 支付
			payfor() {
				console.log(JSON.parse(uni.getStorageSync('orderinfo')));
				var obj = JSON.parse(uni.getStorageSync('orderinfo'))
				obj.payType = Number(this.type)
				console.log(obj);
				payConfirm(obj).then(res => {
					console.log(res);
					if (res.success) {
						uni.setStorageSync('orderId', obj.orderId)
						uni.showToast({
							title: '付款成功'
						})
						setTimeout(function() {
							uni.navigateBack({
								delta: 2
							});
						}, 1700)
					}
				})
			},
			radioChange(e) {
				console.log(e.detail.value);
				this.type = e.detail.value
			}
		},
		onLoad() {
			console.log(JSON.parse(uni.getStorageSync('orderinfo')));
			var obj = JSON.parse(uni.getStorageSync('orderinfo'))
			this.id = obj.orderId
			this.price = obj.orderItemList[0].totalPrice
		}
	}
</script>

<style lang="scss">
	.order-info {
		width: 710rpx;
		border-radius: 20rpx;
		padding: 20rpx 40rpx;
		background-color: #FFFFFF;
		margin: 40rpx auto;
		box-sizing: border-box;

		.text {
			font-size: 28rpx;
			color: #666;
			box-sizing: border-box;
		}
	}

	.pay {
		display: flex;
		justify-content: space-between;
		width: 710rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		padding: 20rpx 40rpx;
		background-color: #FFFFFF;
		margin: 20rpx auto;

		.left {
			width: 300rpx;
			box-sizing: border-box;

			.top {
				position: relative;
				width: 300rpx;
				height: 80rpx;
				box-sizing: border-box;
				margin: 20rpx 0;

				image {
					width: 80rpx;
					height: 80rpx;
					border-radius: 40rpx;
					box-sizing: border-box;
				}

				.name {
					position: absolute;
					left: 90rpx;
					top: 20rpx;
					box-sizing: border-box;
					font-size: 28rpx;
				}
			}

		}

		.right {
			width: 60rpx;
			height: 140rpx;
			margin-top: 40rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			flex-direction: column-reverse;
		}
	}

	button {
		width: 710rpx;
		background-color: #354E44;
		box-sizing: border-box;
		color: white;
		margin: 40rpx auto;
	}
</style>
